import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    TouchableNativeFeedback,
    NativeModules,

} from 'react-native';

export default class Home extends Component<{}> {
    // 构造
    constructor() {
        super();
        // 初始状态
        this.state = {
            phoneNum: '',
            pwd: '',
            isLogin: true
        };
    }


    to() {
        //this.props.navigation.navigate('Position',{name :'Position'})
        NativeModules.IntentModule.startActivityFromJS("com.yswl.RNMapActivity","map")
    }

    toCamera(){
        this.props.navigation.navigate('Photo',{name :'Photo'})
    }

    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.headImg}
                       source={require('../img/index_head.jpg')}></Image>
                <View style={styles.nav}>
                    <View style={styles.leftNav}>
                        <View style={styles.left_item}>
                            <Image style={styles.left_img}
                                   source={require('../img/task.png')}/>
                            <Text>任务管理</Text>
                        </View>
                        <TouchableNativeFeedback style={styles.left_item}
                                                 onPress={this.toCamera.bind(this)}>
                        <View style={styles.left_item}>
                            <Image style={styles.left_img}
                                   source={require('../img/upload.png')}/>
                            <Text>上传图片</Text>
                        </View>
                        </TouchableNativeFeedback>

                        <TouchableNativeFeedback style={styles.left_item}
                                                 onPress={this.to}>
                            <View style={styles.left_item}>
                                <Image style={styles.left_img}
                                       source={require('../img/gps.png')}/>
                                <Text>定位</Text>
                            </View>
                        </TouchableNativeFeedback>

                        <View style={styles.left_item}>
                            <Image style={styles.left_img}
                                   source={require('../img/outline.png')}/>
                            <Text>离线</Text>
                        </View>
                        <View style={styles.left_item}>
                            <Image style={styles.left_img}
                                   source={require('../img/history.png')}/>
                            <Text>工作日志</Text>
                        </View>

                    </View>
                    <View style={styles.rightNav}>
                        <View style={styles.right_item}>
                            <Image style={styles.right_img}
                                   source={require('../img/logistics.png')}
                                   resizeMode='stretch'/>
                            <Text>当前配送</Text>
                        </View>
                        <View style={styles.right_item}>
                            <Image style={styles.right_img}
                                   source={require('../img/jiayou.png')}/>
                            <Text>加油</Text>
                        </View>
                        <View style={styles.right_item}>
                            <Image style={styles.right_img}
                                   source={require('../img/repaor.png')}/>
                            <Text>维修</Text>
                        </View>
                    </View>
                </View>
                <TouchableOpacity style={styles.exit}>
                    <Text style={styles.text}>
                        退出
                    </Text>
                </TouchableOpacity>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headImg: {
        flex: 2,
    },
    nav: {
        flex: 8,
        flexDirection: 'row'
    },
    left_item: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'

    },
    left_img: {
        width: 50,
        height: 50
    },
    leftNav: {
        flex: 2,
        alignItems: 'center',
        backgroundColor: '#9b9bec'
    },
    rightNav: {
        flex: 3,
        alignItems: 'center',
        backgroundColor: '#2ac'
    },
    right_item: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',

    },
    right_img: {
        width: 80,
        height: 80
    },

    exit: {
        flex: 1,
        backgroundColor: '#ff6347',
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        fontSize: 20,
    }

});
